<script setup lang="js">
import {ref, onMounted} from "vue";
import {useRouter} from "vue-router";
import {Search, Tickets} from "@element-plus/icons-vue";
import { fetchUserList,createAdmin, updateAdmin, updateAdminStatus, deleteAdmin, getRoleByAdmin, allocRole } from "@/api/login.js";
import {fetchAllRoleList} from "@/api/roleList.js";
import {ElMessage, ElMessageBox} from "element-plus";

const router = useRouter();
const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  keyword: null
};
const defaultAdmin = {
  id: null,
  username: null,
  password: null,
  nickName: null,
  email: null,
  note: null,
  status: 1
};
const listQuery = Object.assign({}, defaultListQuery);
const admin = Object.assign({}, defaultAdmin);


const formData = ref({
  userName: ''
});
const userList = ref([]);
const total = ref(0);

onMounted(() => {
  getUserList()
})
const getUserList = () => {
  fetchUserList(listQuery).then(res => {
    userList.value = res.data.data.list;
    total.value = res.data.data.total;
  });
}

// TODO: 搜索
const handleSearch = () => {
  listQuery.keyword = formData.value.userName;
  getUserList();
}

// TODO: 重置搜索
const handleResetSearch = () => {
  listQuery.keyword = null;
  formData.value.userName = '';
  getUserList();
}

// TODO: 删除操作
const handleDelete = (row) => {
  ElMessageBox.confirm(`确定删除用户 ${row.username}?`,'提示',{
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteAdmin(row.id).then((res) => {
      ElMessage.warning(res.data.message);
      ElMessage.success('删除成功');
      getUserList()
    })
  }).catch(() => {
    ElMessage.info('已取消删除');
  })
}

// TODO: 分页操作方法
const handleSizeChange = (size) => {
  listQuery.pageSize = size;
  getUserList();
}
const handleCurrentChange = (val) => {
  listQuery.pageNum = val;
  getUserList();
}

</script>

<template>
  <div class="user-list">

    <!-- 筛选列表 -->
    <div class="user-search">
      <div class="logo">
        <div class="logo-text">
          <el-icon>
            <Search/>
          </el-icon>
          <span>筛选搜索</span>
        </div>
        <div class="search-btn">
          <el-button type="primary" @click="handleSearch()">查询结果</el-button>
          <el-button icon="refresh" @click="handleResetSearch()">重置</el-button>
        </div>
      </div>
      <div class="search">
        <el-form :inline="true" ref="searchForm" v-model="formData" label-width="100px">
          <el-form-item label="输入搜索内容:">
            <el-input v-model="formData.userName" placeholder="帐号/姓名" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 添加按钮-->
    <div class="add-list">
      <div class="add-btn">
        <el-icon>
          <Tickets/>
        </el-icon>
        <span>数据列表</span>
      </div>
      <div class="add-btn">
        <el-button type="primary" icon="plus" @click="handleAdd()">添加</el-button>
      </div>
    </div>

    <!-- 数据列表 -->
    <div class="user-table">
      <el-table ref="adminTable"
                :data="userList"
                style="width: 100%;" border>
        <el-table-column label="编号" width="100" align="center">
          <template #default={row}>{{ row.id }}</template>
        </el-table-column>
        <el-table-column label="帐号" align="center">
          <template #default={row}>{{ row.username }}</template>
        </el-table-column>
        <el-table-column label="姓名" align="center">
          <template #default={row}>{{ row.nickName }}</template>
        </el-table-column>
        <el-table-column label="邮箱" align="center">
          <template #default={row}>{{ row.email }}</template>
        </el-table-column>
        <el-table-column label="添加时间" align="center">
          <template #default={row}>{{ row.createTime | formatDateTime }}</template>
        </el-table-column>
        <el-table-column label="最后登录" align="center">
          <template #default={row}>{{ row.loginTime | formatDateTime }}</template>
        </el-table-column>
        <el-table-column label="是否启用" align="center">
          <template #default={row}>
            <el-switch
                @change="handleStatusChange(row)"
                :active-value="1"
                :inactive-value="0"
                v-model="row.status">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="320" align="center">
          <template #default={row}>
            <el-button size="small"
                       type="text"
                       icon="tools"
                       style="border:1px solid #26a2de;color: #26a2de;"
                       @click="handleSelectRole(row)">分配角色
            </el-button>
            <el-button size="small"
                       type="primary"
                       icon="edit"
                       @click="handleUpdate(row)">
              编辑
            </el-button>
            <el-button size="small"
                       type="danger"
                       icon="delete"
                       @click="handleDelete(row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="page-bar">
      <el-pagination
          background
          layout="total, sizes,prev, pager, next,jumper"
          :total="total"
          :page-sizes="[5,10,15,20]"
          v-model:page-size="listQuery.pageSize"
          v-model:current-page="listQuery.pageNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>

  </div>
</template>

<style scoped lang="scss">
.user-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;

  .user-search {
    //height: 100px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #d5d5d5;
    border-radius: 5px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;

    .logo {
      width: 100%;
      font-size: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        margin: 0 8px;
      }

      .search-btn {
        margin-left: 30px;
        padding: 0 10px;
      }
    }

    .search {
      width: 100%;

      .el-form {
        margin: 20px;

        .el-form-item {
          width: 280px;
        }
      }
    }
  }

  .add-list {
    //height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px solid #d5d5d5;
    border-radius: 5px;

    .add-btn {
      display: flex;
      align-items: center;

      span {
        margin-left: 8px;
        font-size: 18px;
      }
    }
  }

  .page-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;

  }
}


</style>